<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { webScokeLink, userInfo } from "@/libs/login";
import { getToken } from "@/libs/util";
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  watch: {
    userId: {
      handler(nval) {
        if (nval) {
          webScokeLink();
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
      userInfo: (state) => state.user.userInfo,
    }),
  },
  mounted() {},
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="scss">
.ivu-modal-content {
  max-height: 837px;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.ivu-message {
  z-index: 999999 !important;
}
/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */
.d-flex {
  display: flex;
} // flex 布局
.d-block {
  display: block;
} // 块级元素
.d-inline-block {
  display: inline-block;
} // 行内块元素

.flex-1 {
  flex: 1;
} //  表示 flex容器 子元素所占的比例   可选项 1 0 auto  默认 auto

.flex-row {
  flex-direction: row;
} //  主轴为水平方向，起点在左端
.flex-row-reverse {
  flex-direction: row-reverse;
} //  主轴为水平方向，起点在右端
.flex-column {
  flex-direction: column;
} //   //  主轴为垂直方向，起点在上边
.flex-column-reverse {
  flex-direction: column-reverse;
} //   //  主轴为垂直方向，起点在下边

.flex-nowrap {
  flex-wrap: nowrap;
} // 不换行
.flex-wrap {
  flex-wrap: wrap;
} //  换行
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
} //  换行第一行在下方

.flex-shrink {
  flex-shrink: 0;
} //  元素宽度大于 容器宽度的收缩比例 0为不收缩
.j-start {
  justify-content: flex-start;
} // 水平元素左对齐
.j-au {
  justify-content: space-around;
}
.j-center {
  justify-content: center;
} //  水平元素居中
.j-end {
  justify-content: flex-end;
} // 水平元素 右对齐
.j-sb {
  justify-content: space-between;
} // 水平元素两端对齐
.a-start {
  align-items: flex-start;
} // 垂直元素 上对齐
.a-center {
  align-items: center;
} // 垂直元素 居中对齐
.a-end {
  align-items: flex-end;
} // 垂直元素底对齐
.a-stretch {
  align-items: stretch;
} // 垂直元素 默认
.a-self-start {
  align-self: flex-start;
} // 当前元素 水平左对齐
.a-self-auto {
  align-self: auto;
} //  当前元素 跟随
.a-self-end {
  align-self: flex-end;
} // 当前元素  水平右对齐
.a-self-stretch {
  align-self: stretch;
} // 当前元素 默认
.a-self-baseline {
  align-self: baseline;
}
//  ************************************************
// 工具类
//  ************************************************
@for $i from 1 through 40 {
  //  ************************************************
  // 外边距
  .mt-#{$i * 2} {
    margin-top: (2px * $i);
  }
  .mr-#{$i * 2} {
    margin-right: (2px * $i);
  }
  .mb-#{$i * 2} {
    margin-bottom: (2px * $i);
  }
  .ml-#{$i * 2} {
    margin-left: (2px * $i);
  }
  .m-#{$i * 2} {
    margin: (2px * $i);
  }
  //  ************************************************

  //  ************************************************
  //  内边距
  .pt-#{$i * 2} {
    padding-top: (2px * $i);
  }
  .pr-#{$i * 2} {
    padding-right: (2px * $i);
  }
  .pb-#{$i * 2} {
    padding-bottom: (2px * $i);
  }
  .pl-#{$i * 2} {
    padding-left: (2px * $i);
  }
  .p-#{$i * 2} {
    padding: (2px * $i);
  }
  //  ************************************************

  //  ************************************************
  // 字体大小
  .f-size-#{$i * 2} {
    font-size: (2px * $i);
  }
  // 字体大小
  .f-weight-#{$i * 2} {
    font-weight: (200 * $i);
  }
  //字体颜色
  .c-default {
    color: #adadad;
  }
  .c-bule {
    color: #1885ff;
  }
  //  ************************************************
}
.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused)
  .vue-treeselect__control:hover {
  border-color: #57a3f3 !important;
}
.vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
  border-radius: 5px !important;
  border-color: #57a3f3 !important;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.vue-treeselect--open-below .vue-treeselect__menu {
  top: 5px !important;
  border: none !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  border-radius: 5px;
}
.vue-treeselect__multi-value {
  margin-bottom: 0 !important;
}
.vue-treeselect__multi-value-item-container {
  padding-top: 2px !important;
}
.vue-treeselect__input-container {
  padding-top: 0 !important;
}
.vue-treeselect__multi-value-item {
  padding: 0 !important;
  background: #f7f7f7 !important;
  color: #515a6e !important;
  border: 1px solid #e8eaec !important;
  .vue-treeselect__icon.vue-treeselect__value-remove {
    border-left: none;
    color: #666;
  }
}

.vue-treeselect__menu--transition-enter,
.vue-treeselect__menu--transition-leave-to {
  transform: scaleY(0);
  opacity: 0;
}
.vue-treeselect__menu--transition-enter-active,
.vue-treeselect__menu--transition-leave-active {
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-property: transform, opacity;
  transform-origin: center top;
}
</style>
